<template>
    <a-modal
      width="800px"
      :bodyStyle="bodyStyle"
      :title="title"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :destroyOnClose="true"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
    >
     <div class="a-tree">
      <a-tree
        checkable
        :defaultExpandAll="defaultExpandAll"
        v-model="checkedKeys"
        @check="onCheck"
        :treeData="treeData"
      />
     </div>
    </a-modal>
</template>
<script>
import Vue from 'vue'
import serv from './ProductService'
import { Modal, Tree } from 'ant-design-vue'
Vue.component(Tree.name, Tree)
Vue.component(Modal.name, Modal)
export default {
  data () {
    return {
      confirmLoading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      bodyStyle: { height: 500 },
      loading: false,

      defaultExpandAll: true,
      treeData: [],
      resourceIds: [],
      checkedKeys: []
    }
  },
  props: {
    title: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    },
    record: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    visible: function (nvalue) {
      if (nvalue && Object.keys(this.record).length > 0) {
        this.getTree(this.record.id)
      } else {
        this.treeData = []
        this.resourceIds = []
        this.checkedKeys = []
        this.confirmLoading = false
      }
    },
    checkedKeys: function (nvalue) {
      // this.resourceIds = nvalue
      let resourceIds = [...nvalue]
      // 用选中的节点去获取上级半选中的节点
      nvalue.map((key) => {
        this.treeData.map((item) => {
          if (item.key === key) {
            if (item.pid && !resourceIds.includes(item.pid)) resourceIds.push(item.pid)
          }
          if (item.children) {
            item.children.map((it) => {
              if (it.key === key) {
                if (it.pid && !resourceIds.includes(it.pid)) resourceIds.push(it.pid)
              }
            })
          }
        })
      })
      this.resourceIds = resourceIds
    }
  },
  methods: {
    handleOk () {
      let formData = new FormData()
      formData.append('id', this.record.id)
      formData.append('resourceIds[]', this.resourceIds)
      this.confirmLoading = true
      serv.grant(formData).then(res => {
        this.confirmLoading = false
        if (res.data.code === 0) {
          this.$emit('ok')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    handleCancel (e) {
      this.$emit('cancel')
    },
    onCheck (checkedKeys) {
      // 所有选中的节点（不包括半选中的节点）
      this.checkedKeys = checkedKeys
    },
    async getTree (id) {
      this.treeData = await serv.getTree(id)
      // 收集选中的节点（不包括半选中的节点）
      this.treeData.map((item) => {
        if (!item.children && item.checked) this.checkedKeys.push(item.key)
        if (item.children) {
          item.children.map((it) => {
            if (!it.children && it.checked) this.checkedKeys.push(it.key)
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.a-tree {
  max-height:500px;
  overflow:auto;
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
  width: 100%;
}
</style>
